<template>
    <div class="header">
        <div class="head-top">
            <div class="w1180 top-linkbox clear_float">
                <div class="top-link fl">
                    <span id="spanLogin" v-if="!token">
                        <span class="top-link-bold" @click="put_login">
                            登录</span>
                        <span>|</span>
                        <span class="top-link-bold" @click="put_register">
                            免费注册</span>
                    </span>
                    <span v-else>
                        <span class="top-link-bold" @click="goPage('/self_center')">{{username}}</span>
                        <span>|</span>
                        <span class="top-link-bold" @click="logout">
                            退出</span>
                    </span>
                </div>
                <div class="top-link fr">
                    <a href="/DistributeBootstrap.aspx" target="_blank">自驾分销</a>
                    <span>|</span>
                    <a href="https://www.1hai.cn/NewHelp/Index" target="_blank">帮助中心</a>
                    <div class="site-map">
                        <a href="/sitemap.aspx?from=header" class="site-map-drop" target="_blank">网站导航<em
                                class="sit-map-up iconmore"></em></a>
                        <div class="site-mapinfo">
                            <div class="cover-map"></div>
                            <p class="site-map-link">
                                <router-link to="/self_drive" target="_blank" rel="nofollow">自驾预订</router-link>
                                <router-link to="/car_store" target="_blank" rel="nofollow">营业网点</router-link>
                                <router-link to="/car_search" rel="nofollow">车型查询</router-link>
                                <router-link to="/car_share" target="_blank" rel="nofollow">租车分享</router-link>
                            </p>
                        </div>
                    </div>
                    <span>|</span>
                    <a href="https://en.1hai.cn/" target="_blank">English</a>
                    <span>|</span>
                    <div class="site-contact">
                        <span class="contact-phone">400-888-6608<em class="contact-up iconmore"></em></span>
                        <div class="contact-info" style="display: none;">
                            <div class="cover-contact" style="width: 94px;"></div>
                            港澳台及海外电话
                            <em>+86-511-81886608</em>
                        </div>
                    </div>
                    <span>|</span>
                    <div class="site-wx">
                        <span class="wx-title">微信</span>
                        <div class="wx-info" style="display: none;">
                            <div class="cover-wx"></div>
                            <img src="https://image.1hai.cn/front/qr/wx_code.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-bottom">
            <div class="w1180">
                <router-link to="/" class="logo">
                    <h1>鲸鱼租车</h1>
                </router-link>
                <div class="nav">
                    <ul class="nav-wrap clear_float" id="J_NavBox">
                        <li class="menu-index menu-index-on">
                            <router-link to="/">首页</router-link>
                            <span></span></li>
                        <li class="ele">
                            <span @click="goPage('/self_drive')"
                                  :class="{active: url_path === '/self_drive'}">自驾租车</span>
                        </li>
                        <li class="ele">
                            <span @click="goPage('/car_search')"
                                  :class="{active: url_path === '/car_search'}">车型查询</span>
                        </li>
                        <li class="ele">
                            <span @click="goPage('/car_store')" :class="{active: url_path === '/car_store'}">营业网点</span>
                        </li>
                        <li class="ele">
                            <span @click="goPage('/car_share')" :class="{active: url_path === '/car_share'}">租车分享</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <Login v-if="is_login" @close="close_login" @go="put_register" @login_success="login_success"/>
        <Register v-if="is_register" @close="close_register" @go="put_login"/>
    </div>
</template>

<script>
    import Login from '@/components/Login'
    import Register from '@/components/Register'

    export default {
        name: "Header",
        data() {
            return {
                url_path: sessionStorage.url_path || '/',
                is_login: false,
                is_register: false,
                username: this.$cookies.get('username') || '',
                token: this.$cookies.get('token') || '',
            }
        },
        components: {
            Login,
            Register,
        },
        methods: {
            goPage(url_path) {
                //已经是当前路由就没有必要重新跳转
                // if (url_path === '/self_center'){
                //     let token = this.$cookies.get("token");
                //     if(!token) {
                //         this.$message({
                //             message: "请先登录",
                //             type: "warning",
                //             duration: 1000,
                //         })
                //     }
                // }
                if (this.url_path !== url_path) {
                    this.$router.push(url_path);
                }
                sessionStorage.url_path = url_path
            },
            put_login() {
                this.is_login = true;
                this.is_register = false;
            },
            close_login() {
                this.is_login = false;
            },
            put_register() {
                this.is_login = false;
                this.is_register = true;
            },
            close_register() {
                this.is_register = false;
            },
            login_success() {
                this.username = this.$cookies.get('username') || '';
                this.token = this.$cookies.get('token') || '';
            },
            logout() {
                this.username = '';
                this.token = '';
                this.$cookies.remove('username');
                this.$cookies.remove('token');
                //当前页是个人中心，那么就跳转到首页
                if (this.$route.path === '/self_center') {
                    this.$router.push('/');
                }
            }
        },
        created() {
            sessionStorage.url_path = this.$route.path;
            this.url_path = this.$route.path;
        }
    }
</script>

<style scoped>
    div {
        display: block;
    }

    .head-top {
        background: #f2f2f2;
        height: 28px;
        padding-top: 4px;
        position: relative;
        z-index: 99;
        display: block;
    }

    .w1180 {
        width: 1180px;
        margin: 0 auto;
    }

    .clear_float {
        zoom: 1;
    }

    .clear_float:after {
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
        content: "";
    }

    .fl {
        float: left;
    }

    .top-link span {
        height: 20px;
        line-height: 20px;
        padding: 3px 0;
        cursor: pointer;
        *vertical-align: 3px;
    }

    .top-link a.top-link-bold {
        color: #23b7b7;
    }

    .top-link a {
        color: #666;
        height: 20px;
        line-height: 20px;
        padding: 1px 3px 2px;
        display: inline-block;
        border: 1px solid #f2f2f2;
    }

    a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: none;
    }

    a:hover {
        color: gold
    }

    .fr {
        float: right;
    }

    .site-map, .site-contact, .site-wx {
        position: relative;
        display: inline-block;
        *display: inline;
    }

    .top-link a.site-map-drop {
        width: 70px;
    }

    /*.sit-map-up{*/
    /*display: none;*/
    /*}*/
    .top-link a .sit-map-up {
        width: 1px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 4px;
    }

    em {
        font-style: italic;
    }

    .site-mapinfo {
        width: 235px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 5px 10px;
        position: absolute;
        top: 24px;
        *top: 27px;
        right: 0;
        z-index: 99;
        display: none;
    }

    .site-map:hover .site-mapinfo {
        display: block;
    }

    .cover-map {
        position: absolute;
        right: 0;
        top: -1px;
        height: 1px;
        width: 68px;
        background: #fff;
    }

    .site-map-title {
        border-bottom: 1px dotted #ccc;
        color: #23b7b7;
        font-weight: bolder;
        line-height: 25px;
        text-align: left;
    }

    .site-map-link {
        line-height: 25px;
        text-align: left;
    }

    .site-map-link a {
        color: #666;
        display: inline-block;
        padding: 0 4px 0 0;
        border: none;
    }

    .site-map-more a {
        color: #23b7b7;
        font-weight: bolder;
        border: none;
    }

    .site-map, .site-contact, .site-wx {
        position: relative;
        display: inline-block;
        *display: inline;
    }

    .top-link span.contact-phone {
        padding: 1px 3px 2px;
        color: #23b7b7;
        display: inline-block;
        border: 1px solid #f2f2f2;
        cursor: pointer;
        *vertical-align: 0;
    }

    .top-link span .contact-up {
        background-position: -686px 0;
        width: 9px;
        height: 5px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 4px;
    }

    .contact-info {
        width: 240px;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        border: 1px solid #ccc;
        background: #fff;
        position: absolute;
        top: 24px;
        *top: 27px;
        right: 0;
        z-index: 99;
        display: none;
    }

    .cover-contact {
        position: absolute;
        right: 0;
        top: -1px;
        height: 1px;
        background: #fff;
    }

    .contact-info em {
        font-style: normal;
        color: #23b7b7;
        letter-spacing: 1px;
    }

    .site-map, .site-contact, .site-wx {
        position: relative;
        display: inline-block;
        *display: inline;
    }

    .top-link span.wx-title {
        padding: 1px 6px 4px;
        border: 1px solid #f2f2f2;
        display: inline-block;
        cursor: pointer;
    }

    .wx-info {
        width: 100px;
        text-align: center;
        padding: 12px 8px;
        background: #fff;
        border: 1px solid #23b7b7;
        position: absolute;
        top: 22px;
        *top: 27px;
        right: 0;
        z-index: 99;
        display: none;
    }

    .cover-wx {
        position: absolute;
        right: 0;
        top: -1px;
        height: 1px;
        width: 36px;
        background: #fff;
    }

    .wx-info img {
        width: 100px;
        height: 100px;
    }

    img {
        border: 0;
        vertical-align: middle;
    }

    fieldset, img, input, button {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }

    .head-bottom {
        background: #fff;
        border-bottom: 2px solid #23b7b7;
    }

    .logo {
        background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=136600234,3199891375&fm=26&gp=0.jpg) repeat;
        width: 400px;
        height: 52px;
        background-size: contain;
        display: block;
        margin-top: 15px;
    }


    .nav-wrap {
        margin-left: -26px;
    }

    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }

    .nav-wrap li {
        float: left;
        width: 134px;
        height: 56px;
        text-align: center;
        position: relative;
    }

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    .nav-wrap li.menu-index-on a {
        color: #23b7b7;
    }

    .nav-wrap li.menu-index a {
        font-weight: bold;
    }

    /*.ele:hover {*/
    /*background-color: orange;*/
    /*cursor: pointer;*/
    /*}*/
    .ele span:hover {
        color: gold;
        cursor: pointer;
    }

    .nav-wrap li {
        font-size: 18px;
        color: #666;
        padding: 5px 0;
        margin: 15px 0 8px;
        display: inline-block;
    }

    .ele span.active {
        color: gold;
        border-bottom-color: orange;
    }


</style>